<%-- 
    Document   : requestresearch
    Created on : 21 Sep 2013, 8:18:40 PM
    Author     : Salman Noor : School of Electrical and Information Engineering
--%>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/common/hometaglibs.jsp" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <body>
        <div id="mainContainer">
            <h1 class="exampleTitle"><strong>Work Allocation</strong> System</h1>            
            <div id="mainSubContainer">
                <div id="leftNav">
                    <%@include file="/WEB-INF/includes/sideNavBar.jsp" %>
                </div>
                <div id="actualSuperContentContainer">
                    <h1 class="exampleTitle subTitle">Request to undertake <strong>Research</strong></h1>   
                    <div id="example" class="k-content">
                        <input name='baseURL' type='hidden' value='<c:url value="/allocations/Research/"/>'/>
                        <div id="successMessage" style="display:none;" class="k-block k-success-colored"><span class="k-icon k-i-tick"></span> &nbsp;&nbsp;Request to undertake Research has been sent to HOD for approval.</div>
                        <div id="errorMessage" style="display:none;" class="k-block k-error-colored"><span class="k-icon k-i-exception"></span> &nbsp;&nbsp;<span>Error. Research request could not be saved. Possible Cause:&nbsp; </span><span></span></div>
                        <div class='formElementHolder'>
                            <label for="research_topic" class="k-label-top">Research Topic:</label>
                            <input class="k-textbox" id="research_topic" autocomplete="off" name="research topic" style="width:450px;"  required />
                        </div>
                        <div class='formElementHolder'>
                            <label for="research_desciption" class="k-label-top">Synopsis Of Research:</label>
                            <textarea class="k-textbox" id="research_desciption" autocomplete="off" name="research desciption" style="width:450px;"  required></textarea>
                        </div>
                        <div class='formElementHolder' style="margin-bottom:20px;">   
                            <label for="researchstartdate" style="width:200px;" >Start Date:</label>
                            <input style="float:left; margin: 2px;" autocomplete="off" id="researchstartdate" name="research start date" required/>

                            <label for="researchenddate" style="width:135px;">End Date:</label>
                            <input style="float:left;margin: 2px;" autocomplete="off" id="researchenddate" name="research end date" required/>
                        </div>
                        <div class='formElementHolder'>
                            <label for="research_hours" class="k-label-top">Total Research Hours:</label>
                            <input  id="research_hours" autocomplete="off" name="research hours" type="number" min="1" step="1" style="width:450px;"  required />
                        </div>


                        <div class='formElementHolder'>
                            <label for="research_sabbatical" class="k-label-top">Going on Sabbatical:</label>
                            <input  id="research_sabbatical" autocomplete="off" name="research sabbatical" type="checkbox" />
                        </div>
                        <div id="sabaticalDateContainer" class='formElementHolder' style="margin-bottom:20px;"> 
                            <label style="width:200px;" for="sabbaticalstartdate">Sabbatical Start Date:</label>
                            <input style="float:left;margin: 2px;" name="start date" autocomplete="off" id="sabbaticalstartdate"  />

                            <label style="width:135px;" for="sabbaticalenddate" style="margin-left:3em">Sabbatical End Date:</label>
                            <input style="float:left;margin: 2px;" name="end date" autocomplete="off" id="sabbaticalenddate" />
                        </div>
                        <button id="allocateCourse" class="k-button">Request Allocation</button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                // create NumericTextBox from input HTML element
                $("#research_hours").kendoNumericTextBox();
                var baseUrl = $("input[name='baseURL']").val();

                function researchstartdateChange() {
                    var researchstartdateDate = researchstartdate.value(),
                            researchenddateDate = researchenddate.value();

                    if (researchstartdateDate) {
                        researchstartdateDate = new Date(researchstartdateDate);
                        researchstartdateDate.setDate(researchstartdateDate.getDate());
                        researchenddate.min(researchstartdateDate);
                    } else if (researchenddateDate) {
                        researchstartdate.max(new Date(researchenddateDate));
                    } else {
                        researchenddateDate = new Date();
                        researchstartdate.max(researchenddateDate);
                        researchenddate.min(researchenddateDate);
                    }
                }

                function researchenddateChange() {
                    var researchenddateDate = researchenddate.value(),
                            researchstartdateDate = researchstartdate.value();

                    if (researchenddateDate) {
                        researchenddateDate = new Date(researchenddateDate);
                        researchenddateDate.setDate(researchenddateDate.getDate());
                        researchstartdate.max(researchenddateDate);
                    } else if (researchstartdateDate) {
                        researchenddate.min(new Date(researchstartdateDate));
                    } else {
                        researchenddateDate = new Date();
                        researchstartdate.max(researchenddateDate);
                        researchenddate.min(researchenddateDate);
                    }
                }

                var researchstartdate = $("#researchstartdate").kendoDatePicker({
                    change: researchstartdateChange,
                    format: "yyyy-MM-dd"
                }).data("kendoDatePicker");

                var researchenddate = $("#researchenddate").kendoDatePicker({
                    change: researchenddateChange,
                    format: "yyyy-MM-dd"
                }).data("kendoDatePicker");

                researchstartdate.max(researchenddate.value());
                researchenddate.min(researchstartdate.value());


                function sabbaticalstartdateChange() {
                    var sabbaticalstartdateDate = sabbaticalstartdate.value(),
                            sabbaticalenddateDate = sabbaticalenddate.value();

                    if (sabbaticalstartdateDate) {
                        sabbaticalstartdateDate = new Date(sabbaticalstartdateDate);
                        sabbaticalstartdateDate.setDate(sabbaticalstartdateDate.getDate());
                        sabbaticalenddate.min(sabbaticalstartdateDate);
                    } else if (sabbaticalenddateDate) {
                        sabbaticalstartdate.max(new Date(sabbaticalenddateDate));
                    } else {
                        sabbaticalenddateDate = new Date();
                        sabbaticalstartdate.max(sabbaticalenddateDate);
                        sabbaticalenddate.min(sabbaticalenddateDate);
                    }
                }

                function sabbaticalenddateChange() {
                    var sabbaticalenddateDate = sabbaticalenddate.value(),
                            sabbaticalstartdateDate = sabbaticalstartdate.value();

                    if (sabbaticalenddateDate) {
                        sabbaticalenddateDate = new Date(sabbaticalenddateDate);
                        sabbaticalenddateDate.setDate(sabbaticalenddateDate.getDate());
                        sabbaticalstartdate.max(sabbaticalenddateDate);
                    } else if (sabbaticalstartdateDate) {
                        sabbaticalenddate.min(new Date(sabbaticalstartdateDate));
                    } else {
                        sabbaticalenddateDate = new Date();
                        sabbaticalstartdate.max(sabbaticalenddateDate);
                        sabbaticalenddate.min(sabbaticalenddateDate);
                    }
                }

                var sabbaticalstartdate = $("#sabbaticalstartdate").kendoDatePicker({
                    change: sabbaticalstartdateChange,
                    format: "yyyy-MM-dd"
                }).data("kendoDatePicker");

                var sabbaticalenddate = $("#sabbaticalenddate").kendoDatePicker({
                    change: sabbaticalenddateChange,
                    format: "yyyy-MM-dd"
                }).data("kendoDatePicker");

                sabbaticalstartdate.max(sabbaticalenddate.value());
                sabbaticalenddate.min(sabbaticalstartdate.value());

                $("#sabaticalDateContainer").fadeTo("normal", 0.5);
                $("#research_sabbatical").change(function() {
                    if ($(this).is(":checked")) {
                        $("#sabaticalDateContainer").fadeTo("normal", 1);
                        $("#sabaticalDateContainer").find("input").attr("required", "required");
                    } else {
                        $("#sabaticalDateContainer").fadeTo("normal", 0.5);
                        $("#sabaticalDateContainer").find("input").val("");
                        $("#sabaticalDateContainer").find("input").removeAttr("required");
                    }
                });
                var $validatable = $("#actualSuperContentContainer").kendoValidator();
                $("#successMessage").hide();
                $("#allocateCourse").click(function(e) {
                    e.preventDefault();
                    $("#successMessage").hide();
                    if ($validatable.data("kendoValidator").validate()) {
                        var dataToSubmit = {};
                        $("#actualSuperContentContainer").find("input,textarea").each(function(index, dom) {
                            if ($(this).is("[type='checkbox']")) {
                                dataToSubmit[$(this).attr("id")] = $(this).is(":checked");
                            } else {
                                dataToSubmit[$(this).attr("id")] = $(this).val();
                            }

                        });

                        $.ajax({
                            type: "POST",
                            async: true,
                            url: baseUrl + "create",
                            data: dataToSubmit,
                            error: function(xhr, status, error) {
                              $("#errorMessage").find("span:last").empty();
                                
                              $("#errorMessage").find("span:last").text(error);
                              $("#errorMessage").fadeIn("normal", function() {
                                    setTimeout(function() {
                                        $("#errorMessage").fadeOut();
                                    }, 5000);
                                });
                            },
                            success: function(data) {
                                $("#actualSuperContentContainer").find("input,textarea").val("");
                                if ($("#research_sabbatical").is(":checked")) {
                                    $("#research_sabbatical").click();
                                }
                                $("#successMessage").fadeIn("normal", function() {
                                    setTimeout(function() {
                                        $("#successMessage").fadeOut();
                                    }, 5000);
                                });

                            }
                        });

                    }

                });
            });
        </script>
        <style>
            .formElementHolder{width:700px;padding: 15px;}
            .formElementHolder label{float:left;width:200px; text-align: right; padding-right: 10px;}

        </style>
    </body>

</html>
